<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HuoCMS安装步骤</title>
    <link rel="stylesheet" href="/static/install/css/reset.css">
    <link rel="stylesheet" href="/static/install/css/Installation.css">
    <link rel="stylesheet" href="/static/install/js/highlight/styles/dark.min.css">
    <script src="/static/install/js/highlight/highlight.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="public_width">
            <h2 class="title">欢迎您使用HuoCMS!</h2>
            <div class="main">
                <!-- 步骤 -->
                <div class="step">
                    <div class="step_width">
                        <!-- 进度条高亮 -->
                        <div class="step_active" style="width: 80%;"></div>

                        <div class="step_box">
                            <div class="step_bin step_first_txt step_textactive">
                                <span>01</span>
                                <p>许可协议</p>
                            </div>
                            <div class="step_bin step_second_txt step_textactive">
                                <span>02</span>
                                <p>环境监测</p>
                            </div>
                            <div class="step_bin step_third_txt step_textactive">
                                <span>03</span>
                                <p>配置系统</p>
                            </div>
                            <div class="step_bin step_fourth_txt step_textactive">
                                <span>04</span>
                                <p>创建数据</p>
                            </div>
                            <div class="step_bin step_fifth_txt">
                                <span>05</span>
                                <p>安装完成</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="main_box">
                    <!-- 创建数据	 -->
                    <div class="created">											
                            <div class="created_in">
                                <div class="created_info">
                                    <div id="exec_success">

                                    </div>
                                    <div id="exec_error" style="display: none">
                                        <p>
                                            <span class="img"><img src="/static/install/image/false.png" alt=""></span>
                                            <span id="err-msg"></span>
                                        </p>
                                        <pre><code class="language-html" id="err-detail"></code></pre>
                                    </div>
                                    <p id="success" style="display: none">
                                        <span class="img"><img src="/static/install/image/true.png" alt=""></span>
                                        <span>数据库安装成功!</span>
                                    </p>
                                </div>
                            </div>
                            <div class="configure_operation solid">
                            <button disabled="true" onclick="window.history.go(-1);" id="back_btn" class="btn_back disabled">上一步</button>
                            <button disabled="true" onclick="installDone()" id="done_btn" class="step_fourth disabled">安装完成</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="center">
                <span>Copyright © 2021 <a target="_blank" href="http://www.huocms.com">HuoCMS</a>
                    All Rights Reserved.
                    <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">苏ICP备2021024265号</a>  Powered by
                    <a target="_blank" href="http://www.huocms.com">HuoCMS</a>
                </span>
                <span>Designed by <a target="_blank" href="http://www.pailiu.com">派流</a></span>
                </div>
        </div>
</div>

    <!-- JavaScript -->
    <script src="/static/install/js/jquery-1.11.3.min.js"></script>
    <script src="/static/install/js/coco-message.js"></script>
    <script>
        /*滚动条始终处于底部*/
        function wordBottom() {
            var box = $(".created_info");

            box.scrollTop(box[0].scrollHeight);
        }
        function backend(){

        }
        function installDone(){
            window.location.href = '/install_complete';
        }
    </script>
    <script>
        function removeDisabled(id){
            $(id).removeClass('disabled');
            $(id)[0].disabled = false;
        }

        var sqlTotal = {$sql_count};
        let sqlIndex = 0;
        function install(sqlIndex) {
            $.ajax({
                url: "/install_exec",
                data: {sql_index: sqlIndex},
                dataType: 'json',
                type: 'post',
                success: function (res) {
                    if (res.code == 0) {
                        if (res.data.type == 1) {
                            let _html = '<p><span class="img"><img src="/static/install/image/true.png" alt=""></span><span>' + res.data.message + '</span></p>';
                            $('#exec_success').append(_html);
                        }
                        sqlIndex++;
                        if (sqlIndex <= sqlTotal) {
                            install(sqlIndex);
                        }
                    } else if (res.code == 200) {
                        $('#success').show();
                        removeDisabled('#back_btn');
                        $.ajax({
                            url: "/install_check",
                            data: {},
                            dataType: 'json',
                            type: 'get',
                            success: function (res) {
                                if (res.code != 0) {
                                    cocoMessage.error(res.msg, 2000);
                                }else{
                                    removeDisabled('#done_btn');
                                }
                            }
                        });
                    } else {
                        $('#err-msg').text(res.data.exception);
                        $('#err-detail').text(res.data.sql);
                        $("#exec_error").show();
                        removeDisabled('#back_btn');
                    }
                    wordBottom();
                }
            });
        }

        $(function () {
            setTimeout(function () {
                install(sqlIndex);
            }, 1000)
        });

        // 创建数据
        $('.step_fourth').click(function(){
            $('.step_fifth_txt').addClass('step_textactive');
            $('.step_active').css('width','100%');
            $('.created').css('display','none');
            $('.complete').css('display','block');
                // document.body.scrollTop = document.documentelement.scrollTop = 0;
        });

        hljs.highlightAll();
    </script>
</body>
</html>